import React, { useEffect, useState } from "react";
import InputColor from 'react-input-color';
import "./index.scss";

interface IVColorPockerProps {
    value: string;
    onChange: (color: string) => void;
}

const defaultColors = ["#FFF", "#F5222D", "#FA541C", "#FADB14", "#52C41A", "#1890FF", "#722ED1", "#8C8C8C", "#000000", "#CCCCCC"]
const VColorPicker: React.FC<IVColorPockerProps> = (props) => {
    const [ color, setColor ] = useState<string>(props.value || "#FFF");
    const onChangeColor = (color: string) => {
        setColor(color);
        props.onChange(color);
    }
    useEffect(() => {
        setColor(props.value)
    }, [props.value])

    return <div className="v-color-picker-wrapper">
        <div className="v-color-picker">
            <InputColor initialValue={color}  onChange={(color) => onChangeColor(color.hex)} />
        </div>
        <ul className="default-color-picker">
            {
                defaultColors.map((co, index) => {
                    return (<div className="color-item" style={{backgroundColor: co}} key={index} onClick={() => onChangeColor(co)}></div>)
                })
            }
        </ul>
    </div>
}

export default VColorPicker;